<!DOCTYPE html>
<html>
<head>
<link href="ui/theme/plus/jquery.ui.all.css?v=1" rel="stylesheet" type="text/css"/>
<style type="text/css">*{font-family:Arial;font-size:11px;}body{background-color:#fff}html, body, {margin: 0;padding: 0;height: 100%;}#map{margin: 0;padding: 0;height: 300px;width:450px;}.group{font-size:11px;border:solid 0px #ddd}#controles{position:absolute;top:5px;left:300px;z-Index:1000;}#msg{border:solid 1px #ddd; background-color:#FDF1BF;height:14px;padding:5px;font-size:11px;color:#C02B55}#jqactividad{width:250px;height:270px;border:solid 1px #ccc;overflow:auto;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var mapa = {map : null,mapOptions : {zoom: 10,center: new google.maps.LatLng(-33.42038, -71.71586),mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},zoomControl: true,zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL}},polyOptions : [{},{strokeColor: '#30C0FF',strokeOpacity: 1.0,strokeWeight: 3},{strokeColor: '#FF8000',strokeOpacity: 1.0,strokeWeight: 3},{strokeColor: '#008000',strokeOpacity: 1.0,strokeWeight: 3},{strokeColor: '#0000FF',strokeOpacity: 1.0,strokeWeight: 3},{strokeColor: '#800000',strokeOpacity: 1.0,strokeWeight: 3},],pin:['','ui/i/pin1.png','ui/i/pin2.png','ui/i/pin3.png','ui/i/pin4.png','ui/i/pin5.png'],init:function(){this.map = new google.maps.Map(document.getElementById('map'),this.mapOptions);}};
var poly=[],path=[];
var msg = {div:null,divText:null,mensaje:'',show:function(mensaje){this.mensaje=mensaje;this.div=!this.div?$('#msg'):this.div;this.divText=!this.divText?$('#msg-text'):this.divText;this.divText.text(this.mensaje);this.div.fadeIn();setTimeout(function(){msg.div.fadeOut();},10000);}};
var gpsdata = {seed: function () {var d = new Date();return d.getTime()},cargar:function(id){$.ajax({url:'data/muestra0'+id+'.json?'+this.seed(),datatype:'application/json',success:function(data){data = eval('('+data+')');data = data.d?data.d:data;var i = data.Table.rows.length,total = data.Table.rows.length,fila = data.Table.rows,grilla = '',cod_act=0,lat=1,lon=2,hora=3;var icono;switch(id){case 1:icono = mapa.pin[1];poly[1] = new google.maps.Polyline(mapa.polyOptions[1]);break;case 2:icono = mapa.pin[2];poly[2] = new google.maps.Polyline(mapa.polyOptions[2]);break;case 3:icono = mapa.pin[3];poly[3] = new google.maps.Polyline(mapa.polyOptions[3]);break;case 4:icono = mapa.pin[4];poly[4] = new google.maps.Polyline(mapa.polyOptions[4]);break;case 5:icono = mapa.pin[5];poly[5] = new google.maps.Polyline(mapa.polyOptions[5]);break;}poly[id].setMap(mapa.map);path[id] = poly[id].getPath();while(i--){grilla+='<div onclick="gpsdata.posicionar('+fila[i][lat]+','+fila[i][lon]+',\''+fila[i][hora]+'\')">'+fila[i][hora]+'</div>';posActual = new google.maps.LatLng(fila[i][lat],fila[i][lon]);var marker = new google.maps.Marker({position:posActual,map:mapa.map,title:fila[i][hora] + ' @ ' +posActual.toString(),animation:google.maps.Animation.DROP,icon:icono});path[id].push(posActual);}$('#jqactividad').html(grilla);}});},posicionar:function(lat,lon,hora){var myLatlng = new google.maps.LatLng( lat,lon );try{var marker = new google.maps.Marker({position: myLatlng,map: mapa.map,title: 'Hora: '+hora+' - Posicion: '+ myLatlng.toString(),animation: google.maps.Animation.DROP,icon:mapa.ipin});}catch(ex){alert('error:'+ex.description);}}};
$(function(){mapa.init();$('input[type=button]').button();$('#btnCargaData01').click(function(){gpsdata.cargar(1);});$('#btnCargaData02').click(function(){gpsdata.cargar(2);});$('#btnCargaData03').click(function(){gpsdata.cargar(3);});$('#btnCargaData04').click(function(){gpsdata.cargar(4);});msg.show('mapa cargado');});
</script>
</head>
<body>
<h2>Mes del mar: Seguimiento lobos marinos via GPS</h2><div id="controles" class="group"><div id="list" style="display:none;float:left" class="ui-state-error ui-corner-all"></div></div><div style="float:left;"><input type="button" id="btnCargaData01" value="01"><br/><input type="button" id="btnCargaData02" value="02"><br/><input type="button" id="btnCargaData03" value="03"><br/><input type="button" id="btnCargaData04" value="04"><br/><input type="button" id="btnCargaData04" value="05"><br/><div id="jqactividad" class="ui-corner-all" style="display:none"></div></div><div style="float:left;"><div id="map"></div></div><div id="msg" style="display:none;float:left" class="ui-state-error ui-corner-all"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span><span id="msg-text"></span></div>
</body>
</html>